<template>
    <div>
      <form @submit.prevent>
        <label>
          Image URL:
          <input type="text" v-model="imageUrl" />
        </label>
        <br />
        <label>
          Target Width:
          <input type="number" v-model.number="targetWidth" />
        </label>
        <br />
        <label>
          Target Height:
          <input type="number" v-model.number="targetHeight" />
        </label>
        <br />
        <button @click="resizeImage">Resize Image</button>
      </form>
      <div v-if="imageData">
        <img :src="imageData" />
      </div>
    </div>
  </template>

<script>
import request from '@/api/request.js'
export default {
  data () {
    return {
      imageUrl: '',
      targetWidth: 0,
      targetHeight: 0,
      imageData: ''
    }
  },
  methods: {
    resizeImage () {
      request
        .get('/resizeImage', {
          params: {
            imageUrl: this.imageUrl,
            targetWidth: this.targetWidth,
            targetHeight: this.targetHeight
          },
          responseType: 'arraybuffer'
        })
        .then((response) => {
          const imageBlob = new Blob([response.data], { type: 'image/jpeg' })
          this.imageData = URL.createObjectURL(imageBlob)
        })
        .catch((error) => {
          console.error(error)
        })
    }
  }
}
</script>
